<template>
  <div class="layout-fixed">
    <!-- fixed定位的头部 -->
    <header>头部</header>
    <!-- 可以滚动的区域 -->
    <main id="content">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }}
        </li>
      </ul>
    </main>
    <!-- fixed定位的底部 -->
    <footer>
      <input
        type="text"
        placeholder="Footer..."
        v-model="content"
        ref="input"
      />
      <button class="submit" @click="handleSubmit">提交</button>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      content: '',
      list: []
    };
  },
  watch: {
    list() {
      this.scrollIntoView();
    }
  },
  methods: {
    // todo TIPS：页面（容器）可滚动时才有用！
    // Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
    // element.scrollIntoView() 参数默认为true。
    // 参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；
    // 参数为false时，使element的底部与视图（容器）底部对齐。
    // document.getElementById("pToShow").scrollIntoView(); 滚动到顶部
    // document.getElementById("pToShow").scrollIntoView(false); 滚动到底部
    scrollIntoView() {
      const dom = document.querySelector('#content');
      dom.scrollIntoView(false);
    },
    handleSubmit() {
      this.list.push(this.content);
      this.content = '';
    },
    handleFocus() {
      // https://zhuanlan.zhihu.com/p/343569217
      // 彻底解决H5中键盘遮挡输入框的问题
      const ua = navigator.userAgent;
      const iOS = /iPad|iPhone|iPod/.test(ua);
      setTimeout(() => {
        if (iOS) {
          if (!/OS 11_[0-3]\D/.test(ua)) {
            document.body.scrollTop = document.body.scrollHeight;
          }
        } else {
          this.$refs.input.scrollIntoView(false);
        }
      }, 300);
    }
    // Android 某些情况下还会出现这个问题，就是键盘显示了，但页面一动不动，好像键盘悬浮在页面上面：
    // https://www.jianshu.com/p/306482e17080
  }
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  width: 100%;
  height: 50px;
  left: 0;
  top: 0;
  background-color: #42b983;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
footer {
  position: fixed;
  width: 100%;
  height: 34px;
  left: 0;
  bottom: 0;
  display: flex;
  background-color: #586c94;

  input {
    flex: 1;
    background-color: #fff;
  }
  .submit {
    background-color: #2c8dfb;
    width: 70px;
    height: 100%;
    color: #fff;
    outline: none;
    border: none;
  }
}
main {
  padding-top: 50px;
  padding-bottom: 68px;

  li {
    padding: 10px 0;
    font-size: 16px;
  }
}
</style>
